<template>
    <div class="generate-container">
      <!-- 顶部配置区 -->
      <div class="top-section">
        <!-- 文本生成配置 -->
        <section class="config-section">
          <div class="card">
            <h2 class="section-title">📝 文本生成配置</h2>
            <div class="config-content">
              <textarea
                v-model="form.prompt"
                placeholder="请输入生成提示词..."
                class="prompt-input"
              ></textarea>
  
              <div class="config-row">
                <div class="config-item">
                  <label>正负面比例：</label>
                  <div class="slider-group">
                    <input
                      type="range"
                      v-model="form.ratio"
                      min="0"
                      max="10"
                    >
                    <div class="ratio-labels">
                      <span>正面 {{ form.ratio }}</span>
                      <span>负面 {{ 10 - form.ratio }}</span>
                    </div>
                  </div>
                </div>
  
                <div class="config-item">
                  <label>生成数量：</label>
                  <input
                    type="number"
                    v-model="form.count"
                    min="1"
                    max="10"
                    class="number-input"
                  >
                </div>
              </div>
  
              <button
                class="generate-btn"
                :disabled="isGenerating"
                @click="handleGenerate"
              >
                {{ isGenerating ? '生成中...' : '开始生成' }}
              </button>
            </div>
          </div>
        </section>
  
        <!-- 发布设置 -->
        <section class="publish-section">
          <div class="card">
            <h2 class="section-title">🚀 发布设置</h2>
            <div class="platform-grid">
              <label
                v-for="platform in platforms"
                :key="platform"
                class="platform-item"
              >
                <input
                  type="checkbox"
                  v-model="selectedPlatforms"
                  :value="platform"
                >
                {{ platform }}
              </label>
            </div>
            <button
              class="publish-btn"
              :disabled="!hasSelectedText"
            >
              发布 ({{ selectedCount }})
            </button>
          </div>
        </section>
      </div>
  
      <!-- 生成预览 -->
      <section class="preview-section">
        <div class="card">
          <div class="preview-header">
            <h2 class="section-title">🔍 生成预览</h2>
            <label class="select-all">
              <input
                type="checkbox"
                v-model="selectAll"
              >
              全选
            </label>
          </div>
  
          <!-- 局部加载状态 -->
          <div 
            v-if="isGenerating"
            class="local-loading"
          >
            <div class="loader"></div>
            <p>正在生成内容...</p>
          </div>
  
          <div 
            v-else
            class="text-list"
          >
            <div
              v-for="(item, index) in generatedItems"
              :key="item.id"
              class="text-item"
              :class="{ selected: item.selected }"
            >
              <div class="item-main">
                <label class="item-select">
                  <input
                    type="checkbox"
                    v-model="item.selected"
                  >
                </label>
                <div class="item-content">
                  {{ item.content }}
                </div>
                <div class="item-actions">
                  <button
                    class="icon-btn edit-btn"
                    @click="openEditor(index)"
                  >
                    ✏️
                  </button>
                  <button
                    class="icon-btn delete-btn"
                    @click="deleteItem(item.id)"
                  >
                    🗑️
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
  
      <!-- 内联编辑模态框 -->
      <div 
        v-if="editingIndex !== null"
        class="edit-modal-overlay"
      >
        <div class="edit-modal">
          <h3>编辑文本</h3>
          <textarea v-model="editingContent"></textarea>
          <div class="modal-actions">
            <button @click="saveEdit">保存</button>
            <button @click="cancelEdit">取消</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, computed } from 'vue'
  import { v4 as uuidv4 } from 'uuid'
  
  // 表单数据
  const form = reactive({
    prompt: '',
    ratio: 5,
    count: 3
  })
  
  // 生成状态
  const isGenerating = ref(false)
  
  // 生成结果
  const generatedItems = ref([])
  
  // 平台相关
  const platforms = ['微博', '抖音', '小红书', 'B站', '知乎']
  const selectedPlatforms = ref([])
  
  // 编辑相关
  const editingIndex = ref(null)
  const editingContent = ref('')
  
  // 计算属性
  const selectedCount = computed(() => 
    generatedItems.value.filter(item => item.selected).length
  )
  
  const hasSelectedText = computed(() => 
    selectedCount.value > 0 && selectedPlatforms.value.length > 0
  )
  
  const selectAll = computed({
    get: () => generatedItems.value.every(item => item.selected),
    set: (value) => {
      generatedItems.value.forEach(item => item.selected = value)
    }
  })
  
  // 生成方法
  const handleGenerate = async () => {
    isGenerating.value = true
    try {
      // 模拟生成延迟
      await new Promise(resolve => setTimeout(resolve, 1500))
      
      const newItems = Array.from({ length: form.count }, () => ({
        id: uuidv4(),
        content: generateMockText(),
        selected: false
      }))
      
      generatedItems.value = [...newItems, ...generatedItems.value]
    } finally {
      isGenerating.value = false
    }
  }
  
  // 生成模拟文本
  const generateMockText = () => {
    const prefix = form.ratio > 5 ? '[正面]' : '[负面]'
    return `${prefix} 根据 "${form.prompt.slice(0, 20)}..." 生成的示例文本 ${Math.random().toString(36).substring(2, 7)}`
  }
  
  // 删除项目
  const deleteItem = (id) => {
    generatedItems.value = generatedItems.value.filter(item => item.id !== id)
  }
  
  // 编辑处理
  const openEditor = (index) => {
    editingIndex.value = index
    editingContent.value = generatedItems.value[index].content
  }
  
  const saveEdit = () => {
    if (editingIndex.value !== null) {
      generatedItems.value[editingIndex.value].content = editingContent.value
      editingIndex.value = null
    }
  }
  
  const cancelEdit = () => {
    editingIndex.value = null
  }
  </script>
  
  <style scoped>
  /* 颜色变量 */
  :root {
    --bg-main: #0d1b2a;
    --bg-surface: #1b263b;
    --text-main: #e0e1dd;
    --text-muted: #778da9;
  }
  
  .generate-container {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 100%;
  }
  
  .top-section {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
  }
  
  .card {
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  
  .section-title {
    color: #8ecae6;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
  }
  
  .prompt-input {
    width: 100%;
    height: 120px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #8ecae6;
    border-radius: 8px;
    color: var(--text-main);
    resize: vertical;
  }
  
  .config-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
  }
  
  /* 按钮样式 */
  .generate-btn,
  .publish-btn {
    width: 100%;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    background: linear-gradient(90deg, #007cf0 0%, #00dfd8 100%);
    color: white;
    transition: opacity 0.2s;
  }
  
  button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  /* 加载状态 */
  .local-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin: 1rem 0;
  }
  
  .loader {
    width: 40px;
    height: 40px;
    border: 4px solid #8ecae6;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  /* 文本项样式 */
  .text-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 1rem;
    margin: 0.5rem 0;
  }
  
  .item-actions {
    display: flex;
    gap: 0.8rem;
    opacity: 0;
    transition: opacity 0.2s;
    margin-left:auto;
  }
  
  .text-item:hover .item-actions {
    opacity: 1;
  }
  
  /* 编辑模态框 */
  .edit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .edit-modal {
    background: var(--bg-surface);
    padding: 2rem;
    border-radius: 8px;
    width: 500px;
  }
  
  .edit-modal textarea {
    width: 100%;
    height: 150px;
    padding: 1rem;
    margin: 1rem 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #8ecae6;
    color: var(--text-main);
    border-radius: 6px;
  }
  
  .modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
  }
  
  @media (max-width: 768px) {
    .top-section {
      grid-template-columns: 1fr;
    }
    
    .config-row {
      grid-template-columns: 1fr;
    }
    
    .edit-modal {
      width: 90%;
    }
  }

  .item-main{
    display:flex;
  }
  </style>